<!DOCTYPE html>
<html lang="zh-CN" ng-app="todo">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" charset="utf-8">
	<title>Todo</title>
	<link rel="stylesheet" type="text/css" href="css/ionic.css">
	<script type="text/javascript" src="js/ionic.bundle.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-controller="TodoCtrl">
	<ion-side-menus>

	    <!-- 中心内容 -->
	    <ion-side-menu-content>
	      <ion-header-bar class="bar-dark">
	        <button class="button button-icon" ng-click="toggleProjects()">
		      	<i class="icon ion-navicon"></i>
		    </button>
		    <h1 class="title">{{activeProject.title}}</h1>
		    <!-- 新增按钮 -->
		    <button class="button button-icon" ng-click="newTask()">
		      	<i class="icon ion-compose"></i>
		    </button>
	      </ion-header-bar>
	      <ion-content scroll="false">
		    <ion-list>
		      <ion-item ng-repeat="task in activeProject.tasks">
		        {{task.title}}
		      </ion-item>
		    </ion-list>
		  </ion-content>
	    </ion-side-menu-content>

	    <!-- 左侧菜单 -->
	    <ion-side-menu side="left">
	      <ion-header-bar class="bar-dark">
	        <h1 class="title">Projects</h1>
	        <button class="button button-icon ion-plus" ng-click="newProject()"></button>
	      </ion-header-bar>
	      <ion-content scroll="false">
		  	<ion-list>
		    	<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
		      		{{project.title}}
		    	</ion-item>
		  	</ion-list>
		  </ion-content>
	    </ion-side-menu>

  	</ion-side-menus>

	<script id="new-task.html" type="text/ng-template">
		<div class="modal">
			<ion-header-bar class="bar-secondary">
				<h1 class="title">New task</h1>
				<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
			</ion-header-bar>
			<ion-content>
				<form ng-submit="createTask(task)">
					<div class="list">
						<label class="item item-input">
							<input type="text" placeholder="What do you need to do?" ng-model="task.title">
						</label>
					</div>
					<div class="padding">
						<button type="submit" class="button button-block button-positive">Create Task</button>
					</div>
				</form>
			</ion-content>
		</div>
	</script>
</html>